<!-- 展会介绍 -->
<template>
  <div class="intro" ref="intro">
    <div class="wCen" v-if="detail">
      <div class="box">
        <!-- 左侧标题 更多 -->
        <div class="box_l animate__fadeInLeft ">
          <div class="homeTitle" v-if="isMobile">
            <span class="homeTitle_l">{{ $t("intro") }} </span>
            <span class="homeTitle_r" v-if="localeCn">ABOUT PCHI</span>
          </div>
          <div class="homeTitleIntro" v-else>
            <div class="homeTitleIntro_r">
              About <br />
              PCHi
            </div>
            <div class="homeTitleIntro_l" v-if="localeCn">
              展会 <br />
              介绍
            </div>
          </div>
          <div class="box_l_more" @click="go2Intro">
            <span>{{ $t("more-tip-understand") }}</span>
          </div>
        </div>
        <!-- 右侧文字 数字 视频 -->
        <div class="box_r animate__fadeInRight ">
          <div class="box_r_desc" v-html="detail.content"></div>
          <div class="box_r_b">
            <!-- 左侧数量 -->
            <div class="box_r_b_ll">
              <ul class="list">
                <li class="list_i">
                  <p class="list_i_txt">{{ $t("intro-area-tip") }}</p>
                  <div class="haBlock">
                    <p class="num">
                      <countTo :startVal="1" :endVal="detail.area * 1" :duration="3000" ref="count1"></countTo><span class="num_plus">+</span>
                    </p>
                    <p class="txt">{{ $t("intro-area-unit") }}</p>
                  </div>
                </li>
                <li class="list_i">
                  <p class="list_i_txt">{{ $t("intro-exhibitor-tip") }}</p>
                  <div class="haBlock">
                    <p class="num">
                      <countTo :startVal="1" :endVal="detail.company * 1" :duration="3000" ref="count2"></countTo><span class="num_plus">+</span>
                    </p>
                    <p class="txt">{{ $t("intro-exhibitor-unit") }}</p>
                  </div>
                </li>
                <li class="list_i">
                  <p class="list_i_txt">{{ $t("intro-visitor-tip") }}</p>
                  <div class="haBlock">
                    <p class="num">
                      <countTo :startVal="1" :endVal="detail.audience * 1" :duration="3000" ref="count3"></countTo><span class="num_plus">+</span>
                    </p>
                    <p class="txt">{{ $t("intro-visitor-unit") }}</p>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 右侧视频 -->
            <div class="box_r_b_rr" v-if="detail.video">
              <video class="video" :src="detail.video" controls></video>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getExhibitionInfo } from "@/api/common";
import countTo from "vue-count-to";
export default {
  components: {
    countTo,
  },
  data() {
    return {
      detail: null,
      scrollTop: 0,
      scrollTopIntro: 0,
    };
  },
  mounted() {
    this.getDataFun();
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    start1() {
      if (this.$refs.count1) {
        this.$refs.count1.start();
      }
    },
    start2() {
      if (this.$refs.count2) {
        this.$refs.count2.start();
      }
    },
    start3() {
      if (this.$refs.count3) {
        this.$refs.count3.start();
      }
    },
    // 获取模块的定位top值
    getTop(el) {
      return this.$refs[el] && this.$refs[el].offsetTop;
    },
    handleScroll() {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(this.scrollTop)

      if (this.scrollTop > this.scrollTopIntro && this.scrollTop < this.scrollTopIntro + 40) {
        this.start1();
        this.start2();
        this.start3();
      }
    },
    getDataFun() {
      this.invoke(getExhibitionInfo).then((res) => {
        if (res && res.code == 200) {
          this.detail = res.data;
          this.$nextTick(() => {
            this.scrollTopIntro = this.getTop("intro");
            if (process.browser) {
              new WOW({
                live: false,
                offset: 50,
                mobile: true, // 是否在移动设备上执行动画
                animateClass: "animate__animated",
              }).init();
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.intro {
  padding-top: 130px;
  background-color: #fff;
  .wCen {
    border-bottom: 1px solid rgba(53, 53, 55, 0.3);
    padding-bottom: 120px;
  }
  p {
    margin: 0;
  }

  .box {
    $wl: 28%;
    $wr: 72%;
    display: flex;

    &_l,
    &_r {
      box-sizing: border-box;
    }

    // 左侧
    &_l {
      width: $wl;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // 查看详情
      &_more {
        width: 180px;
        height: 65px;
        background: #e35191;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
      }
    }

    // 右侧
    &_r {
      width: $wr;
      // 描述
      &_desc {
        font-size: 20px;
        color: #000;
        line-height: 1.8em;
        margin-bottom: 120px;
        text-align: justify;
        :deep(p) {
          margin-bottom: 0;
          margin-top: 0;
        }
      }
      // 数量和视频布局
      &_b {
        $wrr: 63%;
        $wll: calc(100% - #{$wrr});
        width: 100%;
        display: flex;
        justify-content: space-between;
        // 数量
        &_ll {
          width: $wll;
        }
        // 视频容器
        &_rr {
          width: $wrr;
          display: flex;
          justify-content: flex-end;
          align-items: flex-end;
        }
      }
      .video {
        $w: 710px;
        width: $w;
        height: calc(#{$w}/#{$global_scale_video});
        overflow: hidden;
        object-fit: cover;
      }
    }
    // 数字列表
    .list {
      &_i {
        // 名称
        &_txt {
          font-size: 20px;
          border: 1px solid #e55197;
          padding: 2px 4px;
          margin-bottom: 16px;
          display: inline-flex;
          color: #e55197;
        }
        .haBlock {
          margin-bottom: 50px;
          display: flex;
          align-items: flex-end;

          .num,
          .txt {
            margin: 0;
            line-height: 1em;
            color: #e55197;
          }
          .num {
            font-size: 48px;
            font-weight: 600;
            &_plus{
              position: relative;
              left:-10px;
            }
          }

          .txt {
            font-size: 20px;
            margin-left: 10px;
            position: relative;
            top: -6px;
          }
        }
        &:last-child {
          .haBlock {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  @media (min-width: 1441px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    padding-top: scale(100px);
    .wCen {
      padding-bottom: scale(110px);
    }
    .box {
      &_l {
        &_more {
          width: scale(180px);
          height: scale(65px);
          font-size: scale(24px);
        }
      }
      &_r {
        &_desc {
          font-size: scale(20px);
          margin-bottom: scale(120px);
        }
        .video {
          $w: scale(710px);
          width: $w;
          height: calc(#{$w}/#{$global_scale_video});
        }
      }
      .list {
        &_i {
          &_txt {
            font-size: scale(20px);
            margin-bottom: scale(16px);
          }
          .haBlock {
            margin-bottom: scale(50px);
            .num {
              font-size: scale(40px);
              &_plus{
                left:scale(-10px);
              }
            }
            .txt {
              font-size: scale(20px);
            }
          }
        }
      }
    }
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
    padding-top: scale(100px);
    .wCen {
      padding-bottom: scale(110px);
    }
    .box {
      &_l {
        &_more {
          width: scale(180px);
          height: scale(65px);
          font-size: scale(24px);
        }
      }
      &_r {
        &_desc {
          font-size: scale(20px);
          margin-bottom: scale(120px);
        }
        .video {
          $w: scale(710px);
          width: $w;
          height: calc(#{$w}/#{$global_scale_video});
        }
      }
      .list {
        &_i {
          &_txt {
            font-size: scale(20px);
            margin-bottom: scale(16px);
          }
          .haBlock {
            margin-bottom: scale(50px);
            .num {
              font-size: scale(40px);
              &_plus{
                left:scale(-10px);
              }
            }
            .txt {
              font-size: scale(20px);
            }
          }
        }
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
    padding-top: scale(100px);
    .wCen {
      padding-bottom: scale(110px);
    }
    .box {
      &_l {
        &_more {
          width: scale(180px);
          height: scale(65px);
          font-size: scale(24px);
        }
      }
      &_r {
        &_desc {
          font-size: scale(20px);
          margin-bottom: scale(120px);
        }
        .video {
          $w: scale(710px);
          width: $w;
          height: calc(#{$w}/#{$global_scale_video});
        }
      }
      .list {
        &_i {
          &_txt {
            font-size: scale(20px);
            margin-bottom: scale(16px);
          }
          .haBlock {
            margin-bottom: scale(50px);
            .num {
              font-size: scale(40px);
              &_plus{
                left:scale(-10px);
              }
            }
            .txt {
              font-size: scale(20px);
            }
          }
        }
      }
    }
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    padding-top: 40px;
    .wCen {
      padding-bottom: 40px;
    }
    .box {
      flex-direction: column;
      &_l {
        width: 100%;
        position: relative;
        padding-bottom:40px;
        &_more {
          width: scale(180px);
          height: scale(65px);
          font-size: scale(24px);
          margin-bottom: 10px;
          position: absolute;
          right:0;
          bottom:0px;
        }
      }
      &_r {
        width: 100%;
        &_desc {
          font-size: 12px;
          margin-bottom: 20px;
          text-align: left;
        }
        &_b{
          flex-direction: column;
          &_ll,&_rr{
            width: 100%;
          } 
        }
        .video {
          $w: 100%;
          width: $w;
          height: calc(#{$w}/#{$global_scale_video});
        }
      }
      .list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        &_i {
          &_txt {
            font-size: scale(20px);
            margin-bottom: 10px;
          }
          .haBlock {
            margin-bottom: scale(50px);
            .num {
              font-size: scale(48px);
              &_plus{
                left:scale(-10px);
              }
            }
            .txt {
              font-size: scale(20px);
              margin-left: 4px;
            }
          }
        }
      }
    }
  }
}
</style>
